<!DOCTYPE html>
<html lang="zh" class="no-js">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>时间胶囊</title>
	<link rel="stylesheet" type="text/css" href="css/base.css" />
	<script src="js/jquery-1.10.2.js"></script>
	<script src="js/typed.js"></script>
	<script type="text/javascript" src="js/jquery.fireworks.js"></script>
	
	<script>
		function actionBox() {
			document.getElementById('firstH1').style.display="none";

            document.getElementById('contentBox').classList.add('visible');
		}
			
			
		
	</script>
</head>
<body class="demo-1 jq22">
	<h1 id="firstH1"><button class="actionH1" id="actionH1" onclick="actionBox()">嗨，来啦</button>
					 <span >我出了4道题，试试吧</span>
	</h1>
	<div class="grid__item theme-2">
		<button class="action"><svg class="icon icon--rewind"><use xlink:href="#icon-rewind"></use></svg></button>
		<!--<button class="particles-button">Register</button>-->
		<input id="word-e" class="particles-button" placeholder="“输入“嗯”" />
	</div>
	<div id="contentBox" style="text-align: center;">
		<h1 style="width:100%;text-align:center;opacity:0.7">一颗时间胶囊</h1>
		<main>

			<div class="grid" style="margin-top:3%">

				<div class="grid__item theme-2">
					<button class="action"><svg class="icon icon--rewind"><use xlink:href="#icon-rewind"></use></svg></button>
					<!--<button class="particles-button">Register</button>-->
					<input id="word-b" class="particles-button" alt="ASCII" placeholder="“4fdd”什么意思" />
				</div>
				<div class="grid__item theme-2">
					<button class="action"><svg class="icon icon--rewind"><use xlink:href="#icon-rewind"></use></svg></button>
					<input id="word-l" class="particles-button" alt="ASCII" placeholder="“4E50”什么意思" />
				</div>
				<div class="grid__item theme-2">
					<button class="action"><svg class="icon icon--rewind"><use xlink:href="#icon-rewind"></use></svg></button>
					<input id="word-k" class="particles-button"  alt="Base64" placeholder="“5b+r”什么意思" />
				</div>
				<div class="grid__item theme-2">
					<button class="action"><svg class="icon icon--rewind"><use xlink:href="#icon-rewind"></use></svg></button>
					<input id="word-c" class="particles-button"  alt="Base64" placeholder="“5oyB”什么意思" />
				</div>


			</div>

		</main>
		<div class="wrap">


			<div class="type-wrap">
				<div id="typed-strings" class="fade-in">

				</div>
				<span id="typed" style=""></span>
			</div>


		</div>
	</div>
	<script src='js/anime.min.js'></script>
	<script src='js/particles.js'></script>
	<script src='js/shrimpArt.js'></script>
	<style>
	</style>
</body>
</html>